<template>
	<div>
		<el-input 
			v-model="searchInput" 
			placeholder="搜索部门名称" 
			size="small" 
			suffix-icon="el-icon-search"
			@input="inputchange" />
		<div 
			v-loading="loading" 
			class="search-list">
			<el-breadcrumb 
				style="padding: 5px 0;" 
				separator-class="el-icon-arrow-right">
				<el-breadcrumb-item 
					v-for="(item, index) in breadcrumbList" 
					:key="index">
					<a 
						href="javascript:;" 
						@click="breadcrumbBtn(item, index)">{{ item.label }}</a>
				</el-breadcrumb-item>
			</el-breadcrumb>
			<flexbox 
				v-for="(item, index) in showlist" 
				v-if="item.show" 
				:key="index" 
				class="stru-list">
				<el-checkbox 
					v-model="item.isCheck" 
					:disabled="item.disabled" 
					class="stru-check"
					@change="checkChange(item, index)" />
				<div 
					class="stru-name" 
					@click="enterChildren(item)">{{ item.name }}</div>
				<div 
					v-if="item.children" 
					class="el-icon-arrow-right stru-enter" />
			</flexbox>
		</div>
	</div>
</template>
<script type="text/javascript">
	import {
		depList
	} from '@/api/common'

	export default {
		name: 'XhStructure', // 新建 structure
		components: {},
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			/** 多选框 只能选一个 */
			radio: {
				type: Boolean,
				default: false
			},
			/** 已选信息 */
			selectedData: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				breadcrumbList: [], // 面包屑数据
				selectItems: [], // 选择项
				showlist: [], // 展示数据
				loading: false, // 加载动画
				searchInput: ''
			}
		},
		computed: {},
		watch: {},
		mounted() {
			this.selectItems = this.selectedData
			// 部门列表数据
			this.getStructureList()
		},
		methods: {
			// 部门列表数据
			getStructureList() {
				this.loading = true
				depList({
						type: 'tree'
					})
					.then(res => {
						this.showlist = this.addIsCheckProp(res.data)
						this.breadcrumbList.push({
							label: '全部',
							data: this.showlist
						})

						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},
			// 面包屑点击事件
			breadcrumbBtn(item, index) {
				if (this.radio && this.selectItems.length == 1) return
				if (index + 1 <= this.breadcrumbList.length - 1) {
					this.breadcrumbList.splice(index + 1, this.breadcrumbList.length - 1)
				}
				this.showlist = []
				this.showlist = this.handelCheck(item.data)
			},
			// 点击checkbox选中
			checkChange(item, aindex) {
				this.$set(this.showlist, aindex, item)
				var removeIndex = -1
				for (let index = 0; index < this.selectItems.length; index++) {
					const element = this.selectItems[index]
					if (item.id == element.id) {
						removeIndex = index
					}
				}
				if (removeIndex == -1 && item.isCheck) {
					this.selectItems.push(item)
				} else if (removeIndex != -1) {
					this.selectItems.splice(removeIndex, 1)
				}

				/** 单选逻辑 */
				if (this.radio) {
					if (item.isCheck) {
						this.showlist = this.showlist.map(function(element, index, array) {
							if (element.id == item.id) {
								element.disabled = false
							} else {
								element.disabled = true
							}
							return element
						})
					} else {
						this.showlist = this.showlist.map(function(item, index, array) {
							item.disabled = false
							return item
						})
					}
				}

				this.$emit('changeCheckout', {
					data: this.selectItems
				})
			},
			/** 数据重新刷新时 循环标记展示数组 */
			handelCheck(list) {
				var self = this
				list = list.map(function(item, index, array) {
					item.isCheck = self.selectItemsHasItem(item)
					return item
				})
				this.inputchange()
				return list
			},
			selectItemsHasItem(item) {
				if (this.selectItems.length == 0) {
					return false
				}
				var hasItem = false
				for (let index = 0; index < this.selectItems.length; index++) {
					const element = this.selectItems[index]
					if (item.id == element.id) {
						hasItem = true
						break
					}
				}
				return hasItem
			},
			/**  */
			/** 点击进入子数组 */
			enterChildren(item) {
				// 保证单选环境下 没有选中 才可进入children
				if (item.children && !(this.radio && this.selectItems.length == 1)) {
					this.showlist = []
					this.showlist = this.handelCheck(this.addIsCheckProp(item.children))
					this.breadcrumbList.push({
						label: item.label,
						data: this.showlist
					})
				}
			},
			/** 给默认数据加isCheck属性 */
			addIsCheckProp(list) {
				if (list.length > 0) {
					var item = list[0]
					if (item.hasOwnProperty('isCheck')) {
						return list
					} else {
						return list.map(function(item, index, array) {
							item.disabled = false
							item.isCheck = false
							item.show = true
							return item
						})
					}
				}
				return list
			},
			// 父组件 选中
			parentRemoveCheck(data) {
				this.selectItems = data.data
				var temps = this.showlist
				this.showlist = []
				this.showlist = this.handelCheck(temps)
				/** 单选逻辑 */
				if (this.radio) {
					this.showlist = this.showlist.map(function(item, index, array) {
						item.disabled = false
						return item
					})
				}
			},
			/** 搜索 */
			inputchange(val) {
				this.showlist = this.showlist.map(function(item, index, array) {
					if (item.name.indexOf(val) != -1) {
						item.show = true
					} else {
						item.show = false
					}
					return item
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.search-list {
		padding: 5px;
		height: 248px;
		overflow: auto;
	}

	.stru-list {
		padding: 5px;
		font-size: 13px;

		.stru-check {
			margin-right: 8px;
		}

		.stru-name {
			flex: 1;
		}

		.stru-enter {
			margin-right: 8px;
		}
	}
</style>
